<template>
   <div>
       <!-- 面包屑导航区 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>商品管理</el-breadcrumb-item>
         <el-breadcrumb-item>商品列表</el-breadcrumb-item>
     </el-breadcrumb>
     <!-- 卡片视图区 -->
     <el-card>
         <el-row :gutter='20'>
             <el-col :span='8'>
                 <el-input placeholder="请输入内容" v-model='querInfo.query' clearable @clear='getGoodsList'>
                  <el-button slot="append" icon="el-icon-search" @click='getGoodsList'></el-button>
                 </el-input>
             </el-col>
             <el-col :span='4'>
                 <el-button type='primary' @click='goAddPage'>添加商品</el-button>
             </el-col>
         </el-row>
           <!-- table表格区 -->
         <el-table :data='goodslist' border stripe="">
              <el-table-column label='#' type='index'></el-table-column>
              <el-table-column label='商品名称' prop='goods_name'></el-table-column>
              <el-table-column label='商品价格(元)' prop='goods_price' width='95px'></el-table-column>
              <el-table-column label='商品重量' prop='goods_weight' width='70px'></el-table-column>
              <el-table-column label='创建时间' prop='add_time' width='160px'>
                  <template v-slot='scope'>
                      {{scope.row.add_time | dataFormat}}
                  </template>
              </el-table-column>
              <el-table-column label='操作' width='130px'>
                  <template v-slot='scope'>
                      <el-button type="primary" size='mini' icon="el-icon-edit"></el-button>
                      <el-button type="danger"  size='mini' icon="el-icon-delete" @click='removeById(scope.row.goods_id)'></el-button>
                  </template>
              </el-table-column>
         </el-table>

         <!-- 分页区 -->
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="querInfo.pagenum"
           :page-sizes="[5, 10, 15, 20]"
           :page-size="querInfo.pagesize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total"
           background
           >
        </el-pagination>
     </el-card>
   </div>
</template>

<script>
export default {
 name:'List',
 data(){
     return{
        //  查询参数对象
         querInfo:{
             query:'',
             pagenum:1,
             pagesize:20
         },
        //  商品列表
         goodslist:[],
        //  总数据条数
         total:0
     }
 },
 created() {
     this.getGoodsList()
 },
 methods:{
    //  根据分页获取对应的商品列表
   async getGoodsList(){
       const{data:res}= await this.$http.get('goods',{params:this.querInfo})
       if(res.meta.status!==200){
           return this.$message.error('获取商品列表失败!')
       }else{
           this.$message.success('获取商品列表成功!')
           this.goodslist=res.data.goods
           this.total=res.data.total
       }
   },
   handleSizeChange(newSize){
   this.querInfo.pagesize=newSize
   this.getGoodsList()
   },
   handleCurrentChange(newPage){
       this.querInfo.pagenum=newPage
       this.getGoodsList()
   },
//    删除功能
async removeById(id){
   const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(confirmResult !=='confirm'){
            return this.$message.info('已取消删除')
        }else{
           const{data:res}= await this.$http.delete(`goods/${id}`)
           if(res.meta.status!==200){
               return this.$message.error('删除数据失败')
           }else{
               return this.$message.success('删除数据成功')
               this.getGoodsList()
           }
        }
   },
   goAddPage(){
       this.$router.push('/goods/add')
   }
 }
}
</script>

<style lang='less' scoped>

</style>